/**
 * webpack配置
 */

//引入node内置模块,无需下载,直接引入
const path = require('path')

//处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//引入清除dist插件 
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

//暴露webpack对象
module.exports = {
    target: 'web',

    //入口entry
    entry: {
        //公共的样式
        comjs: './src/js/comjs.js',

        //公共的js
        dom: './src/js/commonJs/dom.js',
        http: './src/js/commonJs/http.js',
        utils: './src/js/commonJs/utils.js',
        axios:'./src/js/commonJs/axios.js',

        // 插件js
        // 验证码插件
        captcha: './src/lib/captcha/captcha-mini.js',
        //轮播图插件
        swiper: './src/lib/swiper/swiper.js',
        // 页面的js
        advert: './src/js/advert.js',

        // 登入的js
        login: './src/js/login.js',

        // 注册页面
        register: './src/js/register.js',

        // 主页
        home: './src/js/home.js',

        // 运动
        run: './src/js/run.js',

        //我的
        mine: './src/js/mine.js',

        //个人
        personalInfo: './src/js/personalInfo.js',

        //跑步
        run: './src/js/run.js',
        //骑行
        riding: './src/js/riding.js',
        //课程中心
        course: './src/js/course.js',

        // 课程详情页
        courseDetails: './src/js/courseDetails.js',

        //课程训练
        coursedirll: './src/js/coursedirll.js',

        //跑步中
        runing: './src/js/runing.js',

        //运动图标
        sportsData:'./src/js/sportsData.js',


        //徽章页
        // mybadge:'./src/js/mybadge.js'
    },

    //出口output
    output: {
        path: path.resolve(__dirname, 'dist'), //出口路径
        filename: 'js/[name]-[hash:5].js', //输出文件名字
        publicPath: './'
    },

    //加载器loader
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },

            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader', 'less-loader']
            },

            {
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]', // 图片输出的名字hash长度16位 默认32位
                    limit: 24 * 1024, // 小于10kb base64处理
                    esModule: false, //关闭es6模块化
                    outputPath: 'imgs'
                }
            },

            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },

            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },

            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            },
            {
                test: /\.(mp4)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 10,
                    outputPath: 'imgs'
                }
            }
        ]
    },


    //插件plugins
    plugins: [
        //广告页
        new HtmlWebpackPlugin({
            template: './src/page/advert.html',
            filename: 'advert.html',
            chunks: ['comjs', 'dom', 'advert','axios']
        }),
        //登入页面
        new HtmlWebpackPlugin({
            template: './src/page/login.html',
            filename: 'login.html',
            chunks: ['comjs', 'dom', 'http', 'utils', 'login','axios']
        }),
        // 注册页面
        new HtmlWebpackPlugin({
            template: './src/page/register.html',
            filename: 'register.html',
            chunks: ['comjs', 'dom', 'http', 'captcha', 'utils', 'register','axios']
        }),
        // 主页
        new HtmlWebpackPlugin({
            template: './src/page/home.html',
            filename: 'home.html',
            chunks: ['comjs', 'dom', 'home', 'http', 'utils', 'swiper','axios']
        }),
        // 运动
        new HtmlWebpackPlugin({
            template: './src/page/run.html',
            filename: 'run.html',
            chunks: ['comjs', 'dom', 'run', 'http', 'utils','axios']
        }),
        // 我的
        new HtmlWebpackPlugin({
            template: './src/page/mine.html',
            filename: 'mine.html',
            chunks: ['comjs', 'dom', 'mine', 'http', 'utils','axios']
        }),
        // //个人信息
        new HtmlWebpackPlugin({
            template: './src/page/personalInfo.html',
            filename: 'personalInfo.html',
            chunks: ['comjs', 'dom', 'personalInfo', 'http', 'utils','axios']
        }),
        //跑步
        new HtmlWebpackPlugin({
            template: './src/page/run.html',
            filename: 'run.html',
            chunks: ['comjs', 'dom', 'run', 'http', 'utils','axios']
        }),
        //骑行
        new HtmlWebpackPlugin({
            template: './src/page/riding.html',
            filename: 'riding.html',
            chunks: ['comjs', 'dom', 'riding', 'http', 'utils','axios']
        }),
        //课程中心
        new HtmlWebpackPlugin({
            template: './src/page/course.html',
            filename: 'course.html',
            chunks: ['comjs', 'dom', 'course', 'http', 'utils','axios']
        }),
        //课程详情页
        new HtmlWebpackPlugin({
            template: './src/page/courseDetails.html',
            filename: 'courseDetails.html',
            chunks: ['comjs', 'dom', 'courseDetails', 'http', 'utils','axios']
        }),
        //课程训练
        new HtmlWebpackPlugin({
            template: './src/page/coursedirll.html',
            filename: 'coursedirll.html',
            chunks: ['comjs', 'dom', 'coursedirll', 'http', 'utils','axios']
        }),

        //跑步中
        new HtmlWebpackPlugin({
            template: './src/page/runing.html',
            filename: 'runing.html',
            chunks: ['comjs', 'dom', 'runing', 'http', 'utils','axios']
        }),
        // 运动图表
        new HtmlWebpackPlugin({
            template: './src/page/sportsData.html',
            filename: 'sportsData.html',
            chunks: ['comjs', 'dom', 'sportsData', 'http', 'utils','axios']
        }),

        //我的徽章 
        // new HtmlWebpackPlugin({
        //     template: './src/page/mybadge.html',  
        //     filename: 'mybadge.html',
        //     chunks: ['comjs','dom','mybadge','http','utils']
        // }),







        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),

        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        // 删除dist目录
        new CleanWebpackPlugin()

    ],


    //模式mode
    mode: 'development',
    // mode:'production',

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        progress: true, //打包进度
        port: 4230, // 端口
        open: true, // 自动打开浏览器
        openPage: 'advert.html', // 指定当前要打开页面的名字
        publicPath: '/' //服务器根目录
    },

}